<template>
 <div>
    <el-card>
        <!--  -->
        <categorySelect :isshow="shows!=0" @getCategoryId="getIds"/>
    </el-card>

    <el-card>
        <div v-show="shows==0">
            <el-button type="primary" icon="el-icon-plus" :disabled="!id3" @click="addSpu">添加spu</el-button>

            <el-table border :data="list" v-show="shows==0">

               <el-table-column label="序号" type="index" align="center"></el-table-column>
               <el-table-column label="spu名称" prop="spuName"></el-table-column>
               <el-table-column label="spu描述" prop="description"></el-table-column>
               
               <el-table-column label="操作">
                <template scope="{row}">
                    <hint-Button title="添加sku" type="success" icon="el-icon-plus" size="mini" @click="addSku(row)"></hint-Button>
                    <hint-Button title="修改spu"  @click="updateSpu(row)" type="warning" icon="el-icon-edit" size="mini"></hint-Button>
                    <hint-Button title="查看当前全部sku列表" @click="showSkuList(row)" type="info" icon='el-icon-warning' size="mini"></hint-Button>
                    <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="deleteSpu(row)">
                        <hint-Button title="删除spu" type="danger" icon="el-icon-delete" size="mini" slot="reference"></hint-Button>
                    </el-popconfirm>
                </template>
                 
               </el-table-column>

            </el-table>

            <el-pagination :total="23" :current-page="page" :page-size="limit" @current-change="getSpuList"
              layout="total,prev,pager,next,jumper,->,sizes,total" style="text-align: center;" @size-change="changeSize"></el-pagination>
        </div>

        <!-- 修改添加页面 -->
        <spuForm v-show="shows==1" ref="spuForm" @changeShow="changeShows"></spuForm>

        <skuForm v-show="shows==2" ref="skuForm" @changeShow="changeShows"></skuForm>

        <!-- 查看当前全部sku列表 -->
        <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible" @closed="closed">
          <el-table :data="skuList" v-loading="loading">
            <el-table-column property="skuName" label="名称" width="150"></el-table-column>
            <el-table-column property="price" label="价格" width="200"></el-table-column>
            <el-table-column property="weight" label="重量"></el-table-column>
            <el-table-column label="默认图片">
                <template scope="{row}">
                    <img :src="row.skuDefaultImg" alt="" style="width: 40px;height: 40px;">
                </template>
            </el-table-column>
          </el-table>
        </el-dialog>

    </el-card>

 </div>

</template>

<script>
import skuForm from './skuForm'
import spuForm from './spuForm'
export default {
    name: 'spu',
    data(){
        return {
            showTable:true,
            id1:"",
            id2:"",
            id3:"",
            // table展示的数据
            list:[],
            page:6,
            limit:3,
            // 控制三个组件的切换
            shows:0,
            spu:{},
            skuList:[],
            dialogTableVisible:false,
            loading:true

           }
    },
    components:{spuForm,skuForm},
    methods:{
        async getIds(ids){
            let {id1,id2,id3}=ids;
            this.id1=id1;
            this.id2=id2;
            this.id3=id3;
            this.getSpuList()
        },

        async getSpuList(pages=1){
            this.page=pages;
            let {page,limit,id3}=this;
            let result=await this.$tradeAPI.spu.reqSpuList(page,limit,id3);
            if(result.code==200){
                this.list=result.data.records
            }
        },

        changeSize(size){
            this.limit=size;
            this.getSpuList()
        },

        updateSpu(row){
            this.shows=1;
            this.$refs.spuForm.initSpuData(row)
        },

        changeShows({show,flag}){
            if(flag=="修改"){
                this.getSpuList(this.page)
            }else{
                this.getSpuList()
            }
            this.shows=show;

        },

        addSpu(){
            this.shows=1;
            this.$refs.spuForm.addSpu(this.id3)
        },

        addSku(row){
            this.shows=2;
            this.$refs.skuForm.getData(this.id1,this.id2,row);
            
        },

        async deleteSpu(row){
            let result=await this.$tradeAPI.spu.reqDeleteSpu(row.id);
            if(result.code==200){
                this.$message({type:"success",message:"删除成功"});
                this.getSpuList(this.list.length>1?this.page:this.page-1)
            }
        },

        async showSkuList(spu){
            this.spu=spu;
            this.dialogTableVisible=true;
            let result=await this.$tradeAPI.spu.reqShowSkuList(spu.id);
            if(result.code==200){
                this.loading=false;
                this.skuList=result.data
            }
        },

        closed(){
            this.loading=true;
            this.skuList=[]
        }

        
    }
}
</script>

<style>

</style>
